<template>
  <div class="order">
    <el-page-header title="首页"
                    @back="goBack"
                    content="详情页面">
    </el-page-header>
    <div class="head">
      <h3>我的订单</h3>
    </div>
    <div class="body">
      <div class="orderCard">
        <el-card>
          <el-button @click="getOrderData()">全部订单</el-button>
          <el-button @click="getOrderData(1)"
                     type="primary">待收货</el-button>
          <el-button @click="getOrderData(0)"
                     type="success">待付款</el-button>
        </el-card>
      </div>
      <div class="search">
        <el-input style="width: 200px; margin-top: 20px"
                  v-model="inputSearch"
                  placeholder="请输入商品名称">
        </el-input>
        <el-button @click="search"
                   style="margin: 0 15px"
                   type="primary"
                   icon="el-icon-search">搜索</el-button>
      </div>
      <div class="table"
           style="margin-top: 20px">
        <el-table :data="orderData"
                  stripe
                  border
                  style="width: 100%">
          <el-table-column prop="ordNo, medName, ordDate"
                           label="订单时间"
                           width="450">
            <template v-slot:header="{}">
              <el-select v-model="selectedTime"
                         @change="change">
                <el-option v-for="item in optionTime"
                           :key="item.value"
                           :value="item.value"
                           :label="item.time"></el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <el-link disabled>订单号：</el-link>{{ scope.row.ordNo }} |
              {{ scope.row.medName }} | {{ scope.row.ordDate }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="ordCount"
                           label="购买数量"
                           width="100">
          </el-table-column>
          <el-table-column align="center"
                           prop="ordTotalprice"
                           label="金额"
                           width="150">
          </el-table-column>
          <el-table-column align="center"
                           prop="status"
                           label="购买状态"
                           width="200">
            <template v-slot:header="{}">
              <el-select v-model="selectedStatus"
                         @change="changeStatus">
                <el-option v-for="item in statusList"
                           :key="item.value"
                           :value="item.value"
                           :label="item.status"></el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <div>{{orderStatus(scope.row.ordSituation)}}</div>
              <el-link type="danger"
                       @click="goToLogistic(scope.row.ordNo)">订单详情</el-link>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="操作">
            <template slot-scope="scope">
              <el-button type="primary"
                         @click="handleBuy(scope.$index, scope.row)">立刻购买</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { optionTime, statusList } from 'common/const.js'
import { request } from 'network/request'
import { changeUTCTime } from 'utils/changeUTCTime'
const statusMap = new Map()
statusList.forEach((item) => {
  statusMap.set(item.value, item.status)
})

export default {
  data() {
    return {
      selectedTab: 'orders',
      inputSearch: '',
      orderData: [],
      statusList,
      optionTime,
      selectedTime: optionTime[0].time,
      selectedStatus: statusList[0].status,
      totalOrderNum: 0,
      data: '',
    }
  },

  created() {
    this.getOrderData()
  },

  computed: {
    orderStatus() {
      return function (status) {
        return statusMap.get(status)
      }
    },
  },

  methods: {
    async getOrderData(ordSituation = '') {
      const { count, data } = await request({
        url: '/order',
        params: { page: 1, pageSize: 15, ordSituation },
      })
      this.orderData = data
      this.orderData.forEach((item) => {
        item.ordDate = changeUTCTime(item.ordDate)
      })
      this.totalOrderNum = count
    },

    goBack() {
      this.$router.push('/')
    },
    search() {
      let str = ['', ...this.inputSearch, ''].join('.*')
      let reg = new RegExp(str)
      this.orderData = this.orderData.filter((item) => {
        return reg.test(item.medName) === true
      })
    },
    handleBuy() {},
    change(value) {},
    changeStatus(ordSituation) {
      ordSituation = ordSituation === -1 ? '' : ordSituation
      this.getOrderData(ordSituation)
    },
    goToLogistic(orderNumber) {
      this.$router.push({
        path: '/logistic',
        query: {
          orderNumber,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.order {
  .el-page-header {
    background: rgb(245, 245, 245);
    padding: 8px 10px;
    border-bottom: 1px soild #e0e0e0;
  }
  .head {
    width: 90%;
    height: 60px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    margin: 20px 40px;
    line-height: 60px;
    h3 {
      padding: 0 0 0 20px;
    }
  }
  .body {
    width: 90%;
    margin: 20px 40px;
  }
}
</style>
